<template>
  <Drawer :destroyOnClose="true" v-model:visible="visible" width="800px" title="证书配置">
    <div class="text-sl-textGray text-14px mb-10px text-sm w-700px">
      <div class="justify-center w-full flex mb-10px">
        <Button mx-auto type="danger" ghost>重要提示</Button>
      </div>
      <ul>
        <li>1.请确认证书与域名相匹配并在有效时间</li>
      </ul>
    </div>
    <Divider />
    <Form ref="formRef" :model="certificate" :rules="rules">
      <FormItem label="证书类型" name="type" class="">
        <RadioGroup v-model:value="certificate.type">
          <Radio v-for="type in certificateType" :key="type.value" :value="type.value">{{ type.desc }}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="证书名称" name="name" class="">
        <Input v-model:value="certificate.name" placeholder="请输入证书名称" class="w-400px" width="100px"> </Input>
      </FormItem>
      <FormItem label="证书内容" name="content" class="">
        <Textarea
          v-model:value="certificate.content"
          :autoSize="{ minRows: 4, maxRows: 8 }"
          placeholder="请输入PEM格式证书内容"
          class="w-600px"
          width="100px"
        >
        </Textarea>
      </FormItem>
      <FormItem required name="secretKey" label="证书私钥" class="">
        <Textarea
          :autoSize="{ minRows: 4, maxRows: 8 }"
          v-model:value="certificate.secretKey"
          placeholder="请输入PEM格式证书私钥"
          class="w-600px"
          width="100px"
        >
        </Textarea>
      </FormItem>
    </Form>

    <template #footer>
      <div class="float-right">
        <Button @click="closeDrawer" class="mr-10px">取消</Button>
        <Button type="primary" @click="openValidityModal">提交</Button>
      </div>
    </template>
  </Drawer>
  <ValidityModal pageType="UPDATE_CERTIFICATE" @success="submitForm" ref="validityModalRef" />
  <SuccessModal ref="successModalRef" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Drawer, Form, Button, FormItem, Input, Radio, RadioGroup, Textarea, Divider } from 'ant-design-vue';
import ValidityModal from './ValidityModal.vue';
import { updateTenantCerificateConfig } from '/@/api/system-mgmt/system-config/systemConfig';
import SuccessModal from './successModal.vue';
import { useMessage } from '../../../../hooks/web/useMessage';

const visible = ref<boolean>(false);
const emits = defineEmits(['success']);
const certificate = ref({
  type: undefined,
  name: undefined,
  content: undefined,
  secretKey: undefined,
  expireTime: undefined,
  verify: {},
  tenantCode: undefined,
});
const formRef = ref(null);
const validityModalRef = ref(null);
const successModalRef = ref(null);
const certificateType = ref(null);
const { createMessage } = useMessage();
const rules = {
  type: [{ required: true, message: '请选择证书类型', trigger: 'blur' }],
  name: [{ required: true, message: '请输入证书名称', trigger: 'change' }],
  content: [
    {
      required: true,
      message: '请输入PEM格式证书内容',
      trigger: 'blur',
    },
  ],
  secretKey: [
    {
      required: true,
      message: '请输入PEM格式证书密钥内容',
      trigger: 'blur',
    },
  ],
};

const openDrawer = () => {
  visible.value = true;
};
const closeDrawer = () => {
  visible.value = false;
};

const setCertForm = (certificateData) => {
  certificate.value = certificateData;
};

const submitForm = async (verifyData) => {
  certificate.value.verify = verifyData;
  const res = await updateTenantCerificateConfig(certificate.value);
  validityModalRef.value.closeModal();
  validityModalRef.value.clearForm();
  closeDrawer();
  successModalRef.value.openModal();
  createMessage.success(res);
  emits('success');
};
const setCertificateType = (certificateTypeData) => {
  certificateType.value = certificateTypeData;
};

const openValidityModal = async () => {
  await formRef.value.validateFields();
  validityModalRef.value.openModal();
};

defineExpose({
  openDrawer,
  closeDrawer,
  setCertificateType,
  setCertForm,
});
</script>

<style lang="less" scoped>
ul {
  list-style-type: none;
  line-height: 20px;
  li {
    margin-bottom: 5px;
  }
}
</style>
